//获取学员列表数据,并渲染到表格
function renderStudent() {
    axios({
        url: '/students',
        // headers: {
        //     Authorization: localStorage.getItem('token')
        // }
    }).then(result => {
        console.log(result);
        let newArr = result.data.data.map(item => {
            return `
              <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender ? '女' : '男'}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province} ${item.city} ${item.area}</td>
                <td>
                  <a href="javascript:;" class="text-success mr-3">
                    <i class="bi bi-pen" data-id="${item.id}"></i>
                  </a>
                  <a href="javascript:;" class="text-danger">
                    <i class="bi bi-trash" data-id="${item.id}"></i>
                  </a>
                </td>
              </tr>
            `
        })
        document.querySelector('tbody').innerHTML = newArr.join('')
    })
}

renderStudent()

// ----------------------------------------------省市县联动-----------------------------------------
let province = document.querySelector('[name=province]')
let city = document.querySelector('[name=city]')
let area = document.querySelector('[name=area]')
let title = document.querySelector('.modal-title')

let sheng = '<option value="">--省份--</option>'
let shi = '<option value="">--城市--</option>'
let xian = '<option value="">--地区--</option>'
// 获取省,并渲染
axios({
    url: '/api/province'
}).then(result => {
    let newArr = result.data.data.map(item => `<option value="${item}">${item}</option>`)
    document.querySelector('[name=province]').innerHTML = sheng + newArr.join('')
})
// 省切换的时候,获取市,并渲染
province.addEventListener('change', function () {
    axios({
        url: '/api/city',
        params: {
            pname: province.value
        }
    }).then(result => {
        let newArr = result.data.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = shi + newArr.join('')
        area.innerHTML = xian
        area.value = ''
    })
})

// 市切换的时候,获取区,并渲染
city.addEventListener('change', function () {
    axios({
        url: '/api/area',
        params: {
            pname: province.value,
            cname: city.value
        }
    }).then(result => {
        let newArr = result.data.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = xian + newArr.join('')
    })
})




// ---------------------------------------------模态框盒子--------------------------------------------
// 模态框盒子再student.html第205~285行
let addModal = new bootstrap.Modal(document.querySelector('#modal'))

// 点击+的时候,让模态框显示
document.querySelector('#openModal').addEventListener('click', function () {
    title.innerHTML = '添加学员'  //重置表单
    addModal.show()   //让模态框显示
})

// 点击模态框中的确认按钮
function addStudents() {
    document.querySelector('#submit').addEventListener('click', function () {
        // -------------------------------------------添加功能--------------------------------------------------
        // 获取表单各项的值
        // let data = val(表单)
        let data = val(document.querySelector('#form'))
        // 检查是否是接口需要的数据
        data.age = +data.age
        data.group = +data.group
        data.gender = +data.gender
        data.hope_salary = +data.hope_salary
        data.salary = +data.salary

        // Ajex提交
        axios({
            method: 'POST',
            url: '/students',
            data: data
        }).then(result => {
            message.success(result.data.message)   //使用插件提示消息
            document.querySelector('#form').reset()  //重置表单
            renderStudent()   //更新页面数据
            addModal.hide()    //让模态框隐藏
        })

    })
}

// -----------------------------------------------点击删除--------------------------------------
document.querySelector('tbody').addEventListener('click', async function (e) {
    // 删除功能
    if (e.target.classList.contains('bi-trash')) {
        let id = e.target.dataset.id
        axios({
            url: `/students/${id}`,
            method: 'DELETE'
        }).then(result => {
            message.success('删除成功')
            renderStudent()
        })
    }
    // 编辑功能
    if (e.target.classList.contains('bi-pen')) {
        let id = e.target.dataset.id
        document.querySelector('.modal-title').innerHTML = '修改学员'
        //document.querySelector('.modal-title').setAttribute('属性名', 值)
        title.setAttribute('id', id)
        addModal.show()  //显示模态框
        // 发送请求，获取当前修改的这个学员的详细信息
        let result = await axios({ url: `/students/${id}` })
        console.log(result.data.data) // 输出的是 个人的详细信息
        // 获取城市 和 区县，渲染到第2个和第3个下拉框的位置
        let res1 = await axios({
            url: '/api/city',
            params: {
                pname: result.data.data.province
            }
        })
        let res2 = await axios({
            url: '/api/area',
            params: {
                pname: result.data.data.province,
                cname: result.data.data.city
            }
        })
        // console.log(res1)
        let newArr1 = res1.data.data.map(item => `<option value="${item}">${item}</option>`)
        city.innerHTML = shi + newArr1.join('')
        // console.log(res2)
        let newArr2 = res2.data.data.map(item => `<option value="${item}">${item}</option>`)
        area.innerHTML = xian + newArr2.join('')
        // 做数据回填，继续使用插件 【 val(表单, 数据) 】，关于这个插件，只是简化代码的步骤。
        val(document.querySelector('#form'), result.data.data)
    }
})

document.querySelector('#modal').addEventListener('hidden.bs.modal', () => {
    document.querySelector('#form').reset()
    area.innerHTML = xian
    city.innerHTML = shi
    title.removeAttribute('id')
})

document.querySelector('#submit').addEventListener('click', function (e) {
    const id = title.getAttribute('id')
    let data = val(document.querySelector('#form'))
    // 检查是否是接口需要的数据
    data.age = +data.age
    data.group = +data.group
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    // console.log(title.innerText);
    if (!id) {
        addStudents()
    } else {
        // Ajex提交
        axios({
            method: 'PUT',
            url: `/students/${id}`,
            data: data
        }).then(result => {
            message.success(result.data.message)   //使用插件提示消息
            renderStudent()   //更新页面数据
            addModal.hide()    //让模态框隐藏
        })
    }
})


